<template>
    <div class="hedginginfo">
		<Card>
			<Row>
				<Col span="24" style="font-size:17px;color:#F56C6C;">
					注意：必须先在api设置界面绑定api才能选择对应交易市场
				</Col>
				<Col span="24">
					利润设置筛选(共设置
					<span style="color:#f56c6c;">{{jyds}}</span>
					组交易对，涉及
					<span style="color:#f56c6c;">{{jyscs}}</span>
					个交易市场，
					<span style="color:#f56c6c;">{{dcbzs}}</span>
					种对冲币种，
					<span style="color:#f56c6c;">{{jjbzs}}</span>
					种计价币种)
				</Col>
				<Form :label-width="100" label-position="left">
					<FormItem label="交易市场:" style="margin-bottom:5px;">
						<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
							<Checkbox
								:indeterminate="indeterminate_2"
								:value="checkAll_2"
								@click.prevent.native="handleCheckAll_2">全选</Checkbox>
						</div>
						<CheckboxGroup v-model="filteritem.jysc" @on-change="checkAllGroupChange_filter_1">
							<Checkbox v-for="(item,key) in jysc" :key='key' :label="item"></Checkbox>
						</CheckboxGroup>
					</FormItem>
					<FormItem label="交易方向:" style="margin-bottom:5px;">
						<RadioGroup v-model="filteritem.jyfs">
							<Radio label="双边"></Radio>
							<Radio label="买入市场"></Radio>
							<Radio label="卖出市场"></Radio>
						</RadioGroup>
					</FormItem>
					<FormItem label="对冲币种:" style="margin-bottom:5px;">
						<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
							<Checkbox
								:indeterminate="indeterminate_3"
								:value="checkAll_3"
								@click.prevent.native="handleCheckAll_3">全选</Checkbox>
						</div>
						<CheckboxGroup v-model="filteritem.dcbz" @on-change="checkAllGroupChange_filter_3">
							<Checkbox v-for="(item,key) in targetKeys" :key='key' :label="item"></Checkbox>
						</CheckboxGroup>
					</FormItem>
					<FormItem label="计价币种:" style="margin-bottom:5px;">
						<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
							<Checkbox
								:indeterminate="indeterminate_4"
								:value="checkAll_4"
								@click.prevent.native="handleCheckAll_4">全选</Checkbox>
						</div>
						<CheckboxGroup v-model="filteritem.jjbz" @on-change="checkAllGroupChange_filter_4">
							<Checkbox v-for="(item,key) in jjbz" :key='key' :label="item"></Checkbox>
						</CheckboxGroup>
					</FormItem>
					<FormItem label="启用状态:">
						<RadioGroup v-model="filteritem.status">
							<Radio label="全部"></Radio>
							<Radio label="启用"></Radio>
							<Radio label="未启用"></Radio>
						</RadioGroup>
					</FormItem>
				</Form>
				<Col span="24" style="padding-left:20px;">
					<Button type="primary" style="margin-right:15px;" @click="gethedgingData">查询</Button>
					<Button @click="cancel">重置</Button>
					<Button type="primary" @click="set_trans" style="float:right;">交易对设置</Button>
				</Col>
			</Row>
		</Card>
        <Table border :columns="columns_hedginginfo" :data="data_hedginginfo" style="margin-top:15px;"></Table>
        <Page :total="total" :current="currenPage"  style="text-align:right;margin-top:15px;margin-bottom:15px;" @on-change="changePage"></Page>
		
		<Modal v-model="hedingsetting" :closable="false" width="700px;" :loading = "modal_loading" title="交易对配置" ok-text="保存配置" @on-ok="savesetting">
			<p>
				<Form :label-width="100" label-position="left">
					<span style="font-size:17px;color:#F56C6C;">注意：必须先在api设置界面绑定api才能选择对应交易市场</span>
					<FormItem label="交易市场:">
						<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
							<Checkbox
								:indeterminate="indeterminate"
								:value="checkAll"
								@click.prevent.native="handleCheckAll">全选</Checkbox>
						</div>
						<CheckboxGroup v-model="jysc" @on-change="checkAllGroupChange">
							<Checkbox v-for="(item,key) in checkAllGroup" :key='key' :label="item.name" :disabled="item.disabled"></Checkbox>
						</CheckboxGroup>
					</FormItem>
					<FormItem label="对冲币种:">
						<Transfer
							:data="datalist"
							:target-keys="targetKeys"
							filterable
							:titles="titles"
							:filter-method="filterMethod"
							@on-change="handleChange">
						</Transfer>
					</FormItem>
					<FormItem label="计价币种:">
						<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
							<Checkbox
								:indeterminate="indeterminate_1"
								:value="checkAll_1"
								@click.prevent.native="handleCheckAll_1">全选</Checkbox>
						</div>
						<CheckboxGroup v-model="jjbz" @on-change="checkAllGroupChange_1">
							<Checkbox v-for="(item,key) in jjbzlist" :key='key' :label="item"></Checkbox>
						</CheckboxGroup>
					</FormItem>
				</Form>
			</p>
		</Modal>
    </div>
</template>
<script>
import { ipcRenderer } from 'electron';
export default {
    data(){
		return {
			indeterminate_2:true,
			checkAll_2:false,
			
			indeterminate_3:true,
			checkAll_3:false,
			
			indeterminate_4:true,
			checkAll_4:false,
			filteritem:{
				jysc:[],
				jyfs:'双边',
				status:'全部',
				dcbz:[],
				jjbz:[]
			},

			jyds:0,
			jyscs:0,
			dcbzs:0,
			jjbzs:0,
			titles:['待选对冲币种','已选对冲币种'],
			disabled:false,
			indeterminate: true,
			checkAll: false,
			indeterminate_1:true,
			checkAll_1:false,
			jysc:[],
			checkAllGroup: [
				{ name:'HUOBI',disabled:true,mcfl:'0.2',mrfl:'0.1'},
				{ name:'BITTREX',disabled:false,mcfl:'0.2',mrfl:'0.1'},
				{ name:'GATEIO',disabled:true,mcfl:'0.2',mrfl:'0.1'},
				{ name:'OKCOIN',disabled:true,mcfl:'0.2',mrfl:'0.1'},
				{ name:'BINANCE',disabled:false,mcfl:'0.2',mrfl:'0.1'}
			],
			datalist:[{
				key: 'HUOBI',
				label: 'HUOBI',
				description: '',
				disabled: false
			},{
				key: 'BIANCE',
				label: 'BIANCE',
				description: '',
				disabled: false
			}],
			targetKeys:[],
			modal_loading:true,
			hedingsetting:false,
			issearch:false,
			currenPage:1,
			total:1,
			jcbzlist:['HUOBI', 'bigone'],
			jjbzlist:['eth','usd','usdt','btc'],
			jjbz:[],
			mfsclist:['HUOBI', 'BITTREX','GATEIO','OKCOIN','BINANCE'],
			columns_hedginginfo:[
				{
					title:'基础币种',
					key:'basic_bz'
				},{
					title:'计价币种',
					key:'jj_bz'
				},{
					title:'最小买入',
					key:'zxmr'
				},{
					title:'最大买入',
					key:'zdmr'
				},{
					title:'买方市场',
					key:'mfsc'
				},{
					title:'手续费',
					key:'sxf'
				},{
					title:'卖方市场',
					key:'mfsc_1'
				},{
					title:'手续费',
					key:'sxf_1'
				}
			],
			data_hedginginfo:[{
				basic_bz:'huobi',
				jj_bz:'eoc',
				zxmr:'10',
				zdmr:'100',
				mfsc:'HUOBI',
				sxf:'10%',
				mfsc_1:'bigone',
				sxf_1:'15%'
			}],
		}
	},
	created(){
		ipcRenderer.on('hedginginfo',(event,message) => {
			this.data_hedginginfo = message.data;
			this.total = message.count;
		});
		ipcRenderer.on('searchhedginginfo',(event,message) => {
			this.data_hedginginfo = message.data;
			this.total = message.count;
		});
		this.getMessage('hedginginfo',{page:this.currenPage});
	},
	methods:{
		changeLoading() {
            this.modal_loading = false;
            this.$nextTick(() => {
                this.modal_loading = true;
            });
        },
		getMessage:function(event,type){
			ipcRenderer.send(event,type);
	    },
		changePage:function(page){
			this.currenPage = page;
			if(this.issearch){
				this.getMessage('searchhedginginfo',{searchdata:this.search,page:this.currenPage});
			}else{
				this.getMessage('hedginginfo',{page:this.currenPage});
			}
		},
		gethedgingData:function(){
			this.issearch = true;
			this.currenPage = 1;
			this.getMessage('searchhedginginfo',{searchdata:this.search,page:this.currenPage});
		},
		cancel:function(){
			this.issearch = false;
			this.currenPage = 1;
			this.getMessage('hedginginfo',{page:this.currenPage});
		},
		set_trans:function(){
			this.hedingsetting = true;
		},
		savesetting:function(){
			console.log(this.jysc);
			console.log(this.targetKeys);
			console.log(this.jjbz);
			if(this.jysc && this.targetKeys && this.jjbz){
				this.$Message.success("配置成功");
				this.modal_loading = false;
			}else{
				return this.changeLoading();
			}
			
		},
		handleChange (newTargetKeys) {
			this.targetKeys = newTargetKeys;
		},
		filterMethod (data, query) {
			return data.label.indexOf(query) > -1;
		},
		handleCheckAll () {
			if (this.indeterminate) {
				this.checkAll = false;
			} else {
				this.checkAll = !this.checkAll;
			}
			this.indeterminate = false;

			if (this.checkAll) {
				this.jysc = [];
				for(let i = 0;i<this.checkAllGroup.length;i++){
					if(!this.checkAllGroup[i].disabled){
						this.jysc.push(this.checkAllGroup[i].name);
					}
				}
			} else {
				this.jysc = [];
			}
		},
		checkAllGroupChange (data) {
			if (data.length === this.checkAllGroup.length) {
				this.indeterminate = false;
				this.checkAll = true;
			} else if (data.length > 0) {
				this.indeterminate = true;
				this.checkAll = false;
			} else {
				this.indeterminate = false;
				this.checkAll = false;
			}
		},
		handleCheckAll_1(){
			if (this.indeterminate_1) {
				this.checkAll_1 = false;
			} else {
				this.checkAll_1 = !this.checkAll_1;
			}
			this.indeterminate_1 = false;
			console.log(this.checkAll_1)
			if (this.checkAll_1) {
				this.jjbz = this.jjbzlist;
			} else {
				this.jjbz = [];
			}
		},
		checkAllGroupChange_1 (data) {
			if (data.length === this.jjbzlist.length) {
				this.indeterminate_1 = false;
				this.checkAll_1 = true;
			} else if (data.length > 0) {
				this.indeterminate_1 = true;
				this.checkAll_1 = false;
			} else {
				this.indeterminate_1 = false;
				this.checkAll_1 = false;
			}
		},
		handleCheckAll_2(){
			if (this.indeterminate_2) {
				this.checkAll_2 = false;
			} else {
				this.checkAll_2 = !this.checkAll_2;
			}
			this.indeterminate_2 = false;
			console.log(this.checkAll_2)
			if (this.checkAll_2) {
				this.$set(this.filteritem,'jysc',this.jysc);
			} else {
				this.$set(this.filteritem,'jysc',[]);
			}
		},
		checkAllGroupChange_filter_1(data){
			if (data.length === this.jysc.length) {
				this.indeterminate_2 = false;
				this.checkAll_2 = true;
			} else if (data.length > 0) {
				this.indeterminate_2 = true;
				this.checkAll_2 = false;
			} else {
				this.indeterminate_2 = false;
				this.checkAll_2 = false;
			}
		},
		handleCheckAll_3(){
			if (this.indeterminate_3) {
				this.checkAll_3 = false;
			} else {
				this.checkAll_3 = !this.checkAll_3;
			}
			this.indeterminate_3 = false;
			console.log(this.checkAll_3)
			if (this.checkAll_3) {
				this.$set(this.filteritem,'dcbz',this.targetKeys);
			} else {
				this.$set(this.filteritem,'dcbz',[]);
			}
		},
		checkAllGroupChange_filter_3(data){
			if (data.length === this.targetKeys.length) {
				this.indeterminate_3 = false;
				this.checkAll_3 = true;
			} else if (data.length > 0) {
				this.indeterminate_3 = true;
				this.checkAll_3 = false;
			} else {
				this.indeterminate_3 = false;
				this.checkAll_3 = false;
			}
		},
		handleCheckAll_4(){
			if (this.indeterminate_4) {
				this.checkAll_4 = false;
			} else {
				this.checkAll_4 = !this.checkAll_4;
			}
			this.indeterminate_4 = false;
			console.log(this.checkAll_4)
			if (this.checkAll_4) {
				this.$set(this.filteritem,'jjbz',this.jjbz);
			} else {
				this.$set(this.filteritem,'jjbz',[]);
			}
		},
		checkAllGroupChange_filter_4(data){
			if (data.length === this.jjbz.length) {
				this.indeterminate_4 = false;
				this.checkAll_4 = true;
			} else if (data.length > 0) {
				this.indeterminate_4 = true;
				this.checkAll_4 = false;
			} else {
				this.indeterminate_4 = false;
				this.checkAll_4 = false;
			}
		},
		computesymbol:function(a,b,c){
			let jyscsymbol = [];
			let symbol2= [];
			let symbol3 = [];
			for(let i = 0;i<a.length;i++){
				for(let j = 0;j<a.length;j++){
					if(a[i]!==a[j]){
						let item = {mrsc:a[i],mcsc:a[j],mrfl:'',mcfl:''};
						jyscsymbol.push(item);
					}
				}
			}
			for(let i = 0;i<jyscsymbol.length;i++){
				for(let j = 0;j<b.length;j++){
					//symbol2.push(jyscsymbol[i]+'-'+this.targetKeys[j]);
					jyscsymbol[i].dcbz = b[j];
					symbol2.push(jyscsymbol[i]);
				}
			}
			for(let i = 0;i<symbol2.length;i++){
				for(let j = 0;j<c.length;j++){
					//symbol3.push(symbol2[i]+'-'+this.jjbz[j]);
					symbol2[i].jybz = c[j];
					symbol3.push(symbol2[i]);
				}
			}
			console.log(symbol3)
		}
	},
    destroyed(){
		ipcRenderer.removeAllListeners('hedginginfo');
		ipcRenderer.removeAllListeners('searchhedginginfo');
		ipcRenderer.removeAllListeners('gethedingSelect');
	}
}
</script>
<style scoped>

</style>
